<template>
  <view class="main-view">
    <public-header :title="title" :isBack="isBack"></public-header>

    <view class="main-view-box">
      <u-tabs :activeStyle="{
            color: '#38C09E',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" lineColor="#38C09E" activeColor="#38C09E" :list="tabs" :current="currentTab" @change="changeTab"
        class="u-tabs"></u-tabs>
      <view v-for="(item,index) in tabs">
        <report-table class="report-overview has-header " :serviceName="item.serviceName"
          v-show="currentTab===index" v-if="isLoad[item.serviceName]">
        </report-table>
      </view>
    </view>
  </view>
</template>

<script>
  import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    mixins: [lockscreen],
    data() {
      return {
        isLoad: {},
        title: "",
        isBack: true,
        type: "",
        serviceName: "",
        currentTab: 0,
        tabs: [{
            name: "交接班报表",
            serviceName: "srvretail_handover_count_select"
          },
          {
            name: "员工收银明细",
            serviceName: "srvretail_staff_report_cashierdetails_select"
          },
          {
            name: "营业员业绩",
            serviceName: "srvretail_salesman_report_achievement_select"
          }
        ]
      }
    },
    methods: {
      changeService(e) {
        this.serviceName = e
      },
      changeTab(e) {
        this.currentTab = e.index
        this.isLoad[this.tabs[e.index]['serviceName']] = true
      }
    },
    onLoad(option) {
      if (option.title) {
        this.title = option.title
      }
      if (option.isBack) {
        this.isBack = true
      }
      if (option.type) {
        console.log(option.type);
        this.type = option.type
      }
      if (option.serviceName) {
        this.serviceName = option.serviceName
        this.isLoad[option.serviceName] = true
        if (this.tabs.findIndex(item => item.serviceName === this.serviceName) > -1) {
          this.currentTab = this.tabs.findIndex(item => item.serviceName === this.serviceName)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './report-public.scss';
</style>
